<template>
  <el-menu class="el-menu-vertical-demo" :default-active="$route.path" @open="handleOpen" @close="handleClose" router>
    <el-submenu index="1">
      <template slot="title">
        <span>食堂设置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/canteen/base"><i class="iconfont icon-user-point"></i>基础设置</el-menu-item>
        <el-menu-item index="/canteen/can"><i class="iconfont icon-user-point"></i>食堂</el-menu-item>
        <el-menu-item index="/canteen/periods"><i class="iconfont icon-user-point"></i>餐别</el-menu-item>
        <el-menu-item index="/canteen/chef"><i class="iconfont icon-user-point"></i>厨师</el-menu-item>
        <el-menu-item index="/canteen/item"><i class="iconfont icon-user-point"></i>单品类别</el-menu-item>
        <el-menu-item index="/canteen/tableware"><i class="iconfont icon-user-point"></i>餐具</el-menu-item>
        <el-menu-item index="/canteen/discount"><i class="iconfont icon-user-point"></i>卡优惠规则</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <span>卡务设置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/card/base"><i class="iconfont icon-user-point"></i>基础设置</el-menu-item>
        <el-menu-item index="/card/center"><i class="iconfont icon-user-point"></i>卡务中心</el-menu-item>
        <el-menu-item index="/card/type"><i class="iconfont icon-user-point"></i>卡类型</el-menu-item>
        <el-menu-item index="/card/user"><i class="iconfont icon-user-point"></i>持卡人类别</el-menu-item>
        <el-menu-item index="/card/rules"><i class="iconfont icon-user-point"></i>按次消费规则</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <span>卡管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/manager/open"><i class="iconfont icon-user-point"></i>开卡</el-menu-item>
        <el-menu-item index="/manager/manager"><i class="iconfont icon-user-point"></i>卡管理</el-menu-item>
        <el-menu-item index="/manager/list"><i class="iconfont icon-user-point"></i>卡列表</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <span>档口管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/windows/window"><i class="iconfont icon-user-point"></i>档口</el-menu-item>
        <el-menu-item index="/windows/item"><i class="iconfont icon-user-point"></i>单品</el-menu-item>
        <el-menu-item index="/windows/plan"><i class="iconfont icon-user-point"></i>菜谱计划</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title">
        <span>餐卡账户</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/account/rinsert"><i class="iconfont icon-user-point"></i>批量充值导入</el-menu-item>
        <el-menu-item index="/account/rlogs"><i class="iconfont icon-user-point"></i>批量充值日志列表</el-menu-item>
        <el-menu-item index="/account/sinsert"><i class="iconfont icon-user-point"></i>批量补贴导入</el-menu-item>
        <el-menu-item index="/account/slogs"><i class="iconfont icon-user-point"></i>批量补贴日志</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="6">
      <template slot="title">
        <span>员工管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/staff/manager"><i class="iconfont icon-user-point"></i>员工管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title">
        <span>后厨出票</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/kitchen/kitchen"><i class="iconfont icon-user-point"></i>后厨出票</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>
<style lang="less">
@height:100%;
.el-menu{
  height: @height;
  background-color: #f9f9f9;
  .el-menu-item-group{
    background-color: #fff;
  }
}
</style>
